<template>
	<view>
		<scroll-view scroll-y class="view3" :scroll-into-view="scrollid" scroll-with-animation>
				<view :id="'text'+index" v-for="(i,index) in mychat" :class="i.status==0?'right':'left'" class="view2"> 
					<image :src="i.avatar!=''?baseUrl+i.avatar:'../../static/yonghu.png'" class="img1" :class="i.status==0?'right':'left'"></image>
					<view :class="i.status==0?'right':'left'" class="text1">
					<view>{{i.text}}</view>
					<view style="font-size: 20rpx;color: #c0c0c0;margin-top: 6rpx;" :class="i.status==0?'right':'left'">{{i.createtime}}</view>
					</view>
				</view>
		</scroll-view>
		<view class="view1">
			<input type="text" class="int1" placeholder="请输入消息内容" v-model="content" />
			<button type="primary" size="mini" class="btn1" @click="send" style="line-height: 60rpx;">发送</button>
		</view>
	</view>
</template>

<script>
	import wsRequest from '../../until1/websocket.js'
	import config from '@/config'
	import {getUserProfile} from '../../api/system/user.js'
	import {addchathistory,addchatlist,selectchathistorylist, selectchatlist1} from '../../api/myapi.js'
	export default {
		data() {
			return {
				websock: null,
				content: "",
				tousername: "",
				mychat: [],
				username: "",
				toavatar: "",
				myavatar: "",
				baseUrl: config.baseUrl,
				touserid: "",
				scrollid: ""
			}
		},
		async onLoad(i) {
			this.username = uni.getStorageSync("username")
			this.touserid = i.userid
			this.tousername = i.tousername
			this.toavatar = i.avatar
			console.log(i);
			
			
			this.websock = new wsRequest("ws://114.115.136.95:9900/websocket/" + this.username, 50000)
			let r = await getUserProfile()
			console.log(r);
			this.myavatar = r.data.avatar
			let r1 = await selectchatlist1({
				userid:uni.getStorageSync("userid"),
				toid:parseInt(this.touserid)
			})
			if (r1.data==null) {
				let n = await addchatlist({
					userid:uni.getStorageSync("userid"),
					toid:parseInt(this.touserid)
				})
			}
			let res = await selectchathistorylist({
				username: this.username,
				tousername:i.tousername
			})
			res.data.map((r) => {
				if (r.fromuser == this.username) {
					r.status = 0
					r.avatar = this.myavatar
				} else {
					r.status = 1
					r.avatar = this.toavatar
				}
			})
			this.mychat = res.data
			this.$nextTick(()=>{
				this.scrollid = "text"+JSON.stringify(this.mychat.length-1)
			})
			console.log(this.mychat);
		},
		async onShow() {
			// 接收消息
			this.websock.getMessage(res => {
				let data = JSON.parse(res.data)
				data.avatar = this.toavatar
				data.createtime = this.date()
				this.mychat.push(data)
				this.$nextTick(()=>{
					this.scrollid = "text"+JSON.stringify(this.mychat.length-1)
				})
			})
		},
		methods: {
			date(){
				let d = new Date()
				return d.getFullYear() + '-' + parseInt(d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' +
				  d.getMinutes() + ':' + d.getSeconds()
			},
			async send() {
				// 发送消息
				let data = {
					touser: this.tousername,
					text: this.content,
					fromuser: this.username,
					status: 0
				}
				this.websock.send(JSON.stringify(data));
				let r = await addchathistory(data)
				data.avatar = this.myavatar
				data.createtime = this.date()
				this.mychat.push(data)
				this.content = ""
				this.$nextTick(()=>{
					this.scrollid = "text"+JSON.stringify(this.mychat.length-1)
				})
			}
		}
	}
</script>

<style>
	.view3 {
		height: 92.5vh;
	}

	.text1 {
		max-width: 60%;
		background-color: white;
		border: 1rpx solid #dcdcdc;
		padding: 14rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 4rpx 4rpx 6rpx rgba(0, 0, 0, .3);
		margin: 20rpx 16rpx 0rpx 16rpx;
		font-size: 32rpx;
	}

	.img1 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1rpx solid #dcdcdc;
	}

	.left {
		float: left;
	}

	.right {
		float: right;
	}

	.view2 {
		width: 100%;
		margin-left: 14rpx;
		margin-right: 14rpx;
		word-wrap: break-word;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}

	.btn1 {
		flex: 1;
		margin-left: 10rpx;
	}

	.view1 {
		width: 100%;
		background-color: white;
		padding: 10rpx;
		display: flex;
		margin-top: 10rpx;
	}

	.int1 {
		flex: 9;
		background-color: #F5F5F5;
		border-radius: 20rpx;
		height: 60rpx;
		font-size: 26rpx;
		padding: 4rpx 8rpx;
	}
</style>